<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            margin: 0 auto;
            text-align: center;
        }

        table{
            margin: 0 auto;
            border-collapse:collapse;
            /* border-spacing:0; */
        }

        td{
            width: 200px;
        }

        th{
            background-color: lightgray;
        }

        a{
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div class="outbox">
        <div>
            关键词：
            <input type="text" name="keyword" class="keyword">
            <button class="btn">查询</button>
        </div>
        <h2>热点事件排行榜</h2>
        <table border="1">
            <tr>
                <th>关键词</th>
                <th>搜索指数</th>
                <th>创建事件</th>
            </tr>

            <%for(let i of res){%> 

                <tr>
                    <td><a href="/detail?id=<%=i.id%>"><%=i.keyword%></a></td>
                    <td><%=i.searchsum%></td>
                    <td><%=moment(i.createdate).format("YYYY-MM-DD")%></td>
                </tr>

            <%}%>
        </table>
    </div>
    
<div class="bottom">

    <a href="/index?page=1">首页</a>
    <a href="/index?prepage=pre">上一页</a>
    <a href="/index?nextpage=next">下一页</a>
    <a href="/index?last=last">末页</a>
    第<%=pages.page%>页/共<%=pages.zong%>页

</div>


<script src="/jquery-3.6.0.min.js"></script>
<script>
    $(function(){
    
        $(".btn").on("click",function(){
           console.log(1)
            $.ajax({
                url:"/index?page=1",
                success:function(req,res){
                  let keyword=document.querySelector(".keyword").value;
                  
                  location="/index?keyword="+keyword;
                }
            })
        })
    })
</script>
</body>
</html>